<script lang="ts" setup>
import { reactive } from 'vue'

const emit = defineEmits(['update:modelValue'])
const props = defineProps({
  message: {
    type: String,
    default: '是否强制删除对象？'
  },
  checkLabel: {
    type: String,
    default: '强制删除'
  },
  modelValue: {
    type: Boolean,
    default: false
  }
})

const state = reactive({
  value: props.modelValue
})

const changeHandler = () => {
  emit('update:modelValue', state.value)
}

</script>

<template>
  <div class="pp-container">
    <div class="message-box">
      {{ message }}
    </div>
    <div class="check-box">
      <el-checkbox v-model="state.value"
                   :label="checkLabel"
                   @change="changeHandler" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.pp-container{
  @include ver-group() ;
  flex:none;
  width:100%;
  padding: 0 10px;
  box-sizing: border-box;
  .message-box{
    flex:none;
    width:100%;
    line-height: 20px;
    vertical-align: middle;
    font-size: 13px;
  }
  .check-box{
    @include hor-group();
    box-sizing: border-box;
    margin-top: 10px;
    color:red;

    :deep(.el-checkbox){
      color:red;
    }
  }
}
</style>
